<template>
  <div>
    <my-header></my-header>
    <div class="top-block"></div>
    <mt-field label="手机号" placeholder="请输入手机号" type="tel" ></mt-field>
    <mt-field label="验证码"  placeholder="请输手机入验证码"  >
      <mt-button v-show="show" @click='getCode()'>获取验证码</mt-button>
      <mt-button disabled  v-show="!show">{{count}} s</mt-button>
    </mt-field>
    <mt-button class='regBtn' size='large'>立即注册</mt-button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        timer: null,
        show: true,//倒计时显示开关
        count: '',
      }
    },
    methods:{
      getCode(){
        const TIME_COUNT = 90;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
    }
  }
</script>

<style scoped>
/deep/ .mint-header-button{display: none;}
.regBtn{margin-top: 50%;}
</style>
